<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>一品</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            width: 100%;
            height: 100%;
        }
        body {
            width: 100%;
            height: 100%;
            background: url("https://img.ionepin.com/a1729fbf55d48b2106392e9d443525bd04e93510.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .btn-android {
            position: absolute;
            width: 200px;
            height: 40px;
            background: #FFFFFF;
            border-radius: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #7272A1;
            bottom: 160px;
            left: 50%;
            margin-left: -100px;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        .btn-ios {
            position: absolute;
            width: 200px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            line-height: 40px;
            bottom: 101px;
            left: 50%;
            margin-left: -100px;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
        }
        .icon-android {
            background: url("https://img.ionepin.com/eb7ee83039f0991216cb12c02349bf9cf825237e.png") no-repeat;
            background-size: 100% 100%;
            width: 19px;
            height: 19px;
            margin-right: 4px;
        }
        .icon-ios {
            background: url("https://img.ionepin.com/eb331c39d502a336687bd77320b9e74dfca4e7dc.png") no-repeat;
            background-size: 100% 100%;
            width: 19px;
            height: 19px;
            margin-right: 4px;
        }
        .btn-home {
            position: absolute;
            width: 200px;
            height: 40px;
            background: #FFFFFF;
            border-radius: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #7272A1;
            bottom: 220px;
            left: 50%;
            margin-left: -100px;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
        }
    </style>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("#android").click(function () {
                if (isWeChat()) {
                    alert("请在浏览器中打开")
                    return
                }
                //alert('更新中, 请等待开放')
                window.location.href="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0a5e9159-dd7b-4376-9551-74d0d6d0fb90/418d8471-d461-43dc-93b5-8f9cffa8744e.apk"
            })
            $("#ios").click(function () {
                if (isWeChat()) {
                    alert("请在浏览器中打开")
                    return
                }
                alert('敬请期待')
                //window.location.href="https://testflight.apple.com/join/BNr99AYW"
            })
            $("#index").click(function () {
                window.location.href="/"
            })
        })
        function isWeChat() {
            let ua = window.navigator.userAgent.toLowerCase();
            return ua.match(/MicroMessenger/i) == "micromessenger"; // 判定为true则是微信浏览器，false则不是
        }
    </script>
</head>
<body>
<div class="btn-home" id="index">进入首页</div>
<div class="btn-android" id="android" >
    <div class="icon-android"></div>
    <div class="text">Android下载</div>
</div>
<div class="btn-ios" id="ios">
    <div class="icon-ios"></div>
    <div class="text">敬请期待</div>
</div>
</body>
</html>
